<template>
  <Card>
    <Row style="font-size: 20px">
      <Col span="2">模型查询</Col>
      <Col span="4" >
        <Input type="text" placeholder="请输入模型名或描述" v-model="fuzzyKey">
        <span slot="prepend">
            <Icon :size="16" type="logo-buffer" slot="prefix"/>
          </span>
        </Input>
      </Col>
      <Col span="4" offset="1">
        <Select v-model="type" placeholder="请选择模型类型">
          <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="4" offset="1">
        <Select v-model="creator" filterable remote :remote-method="remoteMethod" :loading="loading1" placeholder="模型所有者信息">
          <Option v-for="(option, index) in options" :value="option.value" :key="index">{{option.label}}</Option>
        </Select>
      </Col>
      <Col span="4" offset="1">
        <Select v-model="state" placeholder="请选择模型状态">
          <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="2"><Button type="primary" @click="searchModel">查询</Button></Col>
      <Col span="1"><Button icon="ios-add-circle-outline" @click="value3 = true"></Button></Col>
      <Drawer title="模型上传" v-model="value3" width="300" :mask-closable="false">
        <Form :model="model" :rules="rules">
          <FormItem prop="name">
            <Input v-model="model.name" type="text" placeholder="请输入模型名字" style="width: 260px" >
              <span slot="prepend">
                <Icon type="ios-image"  slot="prefix"/>
              </span>
            </Input>
          </FormItem>
          <FormItem prop="type">
            <Select v-model="model.type" placeholder="请输入模型类型" style="width: 260px">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="description">
            <Input v-model="model.description" type="textarea" :rows="4" placeholder="请输入模型描述" style="width: 260px" />
          </FormItem>
          <FormItem prop="model">
            <Upload :action="uploadUrl" :on-success="getResult" :headers="headers" accept=".ZIP,.RAR" name="fileUrl">
              <Button icon="ios-cloud-upload-outline" style="width:260px">上传</Button>
            </Upload>
          </FormItem>
          <FormItem>
            <Button type="primary" long @click="createModel">确定</Button>
          </FormItem>
        </Form>
      </Drawer>
    </Row>
  </Card>
</template>

<script>
  import {url} from '../../../config/url'
  import index from '../../store/index'
    export default {
      name: "model-search",
      components:{
      },
      props:{
        nameRules:{
          type:Array,
          default:()=>{
            return[
              {required:true,message:'模型名字不能为空',trigger:'blur'}
            ]
          }
        },
        descriptionRules:{
          type:Array,
          default:()=>{
            return[
              {required:true,message:'模型描述不能为空',trigger:'blur'}
            ]
          }},
       typeRules:{
          type:Array,
          default:()=>{
            return[
              {required:true,message:'模型类型不能为空',trigger:'blur'}
            ]
          }
        }
      },
      computed:{
        rules(){
          return{
            name:this.nameRules,
            description:this.descriptionRules,
            type:this.typeRules,
          }
        }
      },
      data(){
          return{
            headers:{
              Authorization:index.state.Authorization
            },
            fuzzyKey:'',
            type:null,
            creator:'',
            state:null,
            uploadUrl:url+'/file',
            fileUrl:'',
            value3: false,
            loading1: false,
            modelList:[],
            options: [],
            model:{
              name:'',
              type:'',
              description:'',
            },
            typeList:[{
              value:1,
              label:"图像分类"
            },{
              value:2,
              label:"图像检索"
            }],
            stateList: [
              {
                value:1,
                label: '未发布'
              },
              {
                value: 2,
                label: '审核中'
              },
              {
                value: 3,
                label: '已发布'
              },
              {
                value:0,
                label:'空'
              }
            ],
        }
      },
      methods:{
        submit(){

        },
        //发送查询模型的条件
        searchModel(){
          this.modelList=[];
          let query=JSON.stringify({
            'name':this.fuzzyKey,
            'description':this.fuzzyKey,
            'creator_id':this.creator_id,
            'type':this.type,
            'page_size':8,
            'depth':2,
            'status':this.state,
            'fuzzy_key':['name','description'],
            'or_key':['name','description']
          });
          this.$axios.get(url+'/model',{
            params:{
              'data':query
            }
          }).then(res=>{
            if(res.data.error_code==0){
              let records=res.data.data.records;
              let size=records.length;
              for(let i=0;i<size;i++){
                let record={
                  'id':records[i].id,
                  'name':records[i].name,
                  'description':records[i].description,
                  'creator':records[i].creator.username,
                  'type':records[i].type,
                  'state':records[i].status
                };
                this.modelList.push(record)
              }
              this.$emit('modelList',this.modelList)
            }else{
              alert("查询失败")
            }
          })
        },
        dataSetUpload(){
          alert(this.upload.dataSetName)
        },
        //获取发送文件的结果
        getResult(response){
          this.fileUrl=response.data.fileUrl;
        },
        //查询用户ID
        remoteMethod (query) {
          if (query !== '') {
            this.loading1 = true;
            let fuzzyKey=JSON.stringify({
              'name':query,
              'username':query,
              'fuzzy_key': ['name', 'username'],
              'or_key':['name', 'username']
            });
            this.$axios.get(url+'/user',{
              params:{
                'data':fuzzyKey
              }
            }).then(res=>{
              if(res.data.error_code==0){
                let num=res.data.data.total_records;
                this.loading1 = true;
                setTimeout(() => {
                  this.loading1 = false;
                  for(let i=0;i<num;i++){
                    let record=res.data.data.records[i];
                    let list={
                      value: record.id,
                      label: record.username
                    };
                    if(this.options.length==0){
                      this.options.push(list);
                    }
                    if(this.options.length>0){
                      let flag=0;
                      for(let j=0;j<this.options.length;j++){
                        if(list.value==this.options[j].value){
                          flag=1;
                        }
                      }
                      if(flag==0){
                        this.options.push(list)
                      }
                    }
                  }
                }, 200);
              }
            })
          } else {
            this.options = [];
          }
        },
        //创建模型
        createModel(){
          if(this.fileUrl.length>0){
            console.log(this.fileUrl);
            if(this.model.name.length>0&&this.model.type>0&&this.model.description.length>0){
              this.$axios.post(url+'/model',{
                'name':this.model.name,
                'type':this.model.type,
                'description':this.model.description,
                'url':this.fileUrl
              }, {
                  headers: {
                    'Content-Type': 'application/json'
                  }
              }).then(res=>{
                if(res.data.error_code==0){
                  alert("新建模型成功");
                  this.value3=false
                }else{
                  alert("新建模型失败："+res.data.error_code)
                }
              })
            }else {
              alert("创建模型的条件不全，请补全相应条件")
            }
          }else{
            alert("模型文件未完成上传，不可创建模型")
          }
        }
      }
    }
</script>

<style scoped>

</style>
